<template>
    <div>
        <el-card>
            <el-container>
                <el-header v-text="msg"></el-header>
                <el-container>
                    <el-main>
                        <el-row>
                            <el-col :span="2">接收</el-col>
                            <el-col :span="22">
                                <el-input
                                        type="textarea"
                                        :rows="10"
                                        placeholder="接收到的消息"
                                        v-model="msgReceive">
                                </el-input>
                            </el-col>
                        </el-row>
                    </el-main>
                    <el-main>
                        <el-row>
                            <el-col :span="2">
                                待发送
                            </el-col>
                            <el-col :span="22">
                                <el-input
                                        type="textarea"
                                        :rows="5"
                                        placeholder="准备发送的消息"
                                        v-model="msgSend">
                                </el-input>
                            </el-col>
                        </el-row>
                    </el-main>
                    <el-footer class="left">
                        <el-button type="success" @click="sendMessage">发送</el-button>
                    </el-footer>
                </el-container>
            </el-container>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data: () => ({
            textarea: '',
            msgSend: '',
            msgReceive: '',
            wsPath: "ws://127.0.0.1:8080",
            socket: "",
        }),
        methods: {
            sendMessage(data) {
                console.log("发送消息:" + data)

            }
        },
        mounted() {
            this.$socket.emit('connect', "please connect")
        },
        sockets: {
            //查看socket是否渲染成功
            connect(data) {
                if (data) {
                    console.log("即将建立连接，口令:" + data)
                    this.$socket.emit("authentication", {authCode: 666});
                    console.log("连接成功👌");
                }
            },
            users(data) {
                console.log("当前在线人数👱：" + data)
            },
            disconnect() {
                console.log("websocket已断开链接🚫");
                this.$socket.emit("reconnected", {"reconnected":"please connect"})
            },//检测socket断开链接
            reconnect(data) {
                console.log("准备重新连接🏙" + data)
                this.$socket.emit("connect", "please connect")
            },
            //客户端接收后台传输的socket事件
            message(data) {
                this.$notify({
                    title: '新消息',
                    message: data,
                    type: 'warning',
                    duration: 10000
                });
                console.log("data", data);//接收的消息
            }
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
